<template>
  <el-tabs v-model="editSelected"
           :closable="true"
           type="card"
           @tab-remove="removeTab"
           @tab-click="clickTab">
    <el-tab-pane
        :key="item.title"
        v-for="item in editableTabs"
        :label="item.title"
        :name="item.name"
    >
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: "EdiTable",
  data(){
    return{}
  },
  computed:{
    editableTabs(){
      return this.$store.getters.getEditableTabs
    },
    editSelected:{
      get(){
        return this.$store.getters.getEditSelected
      },
      set(val){}
    },
  },
  methods: {
    //移除tab
    removeTab(tabName){
      //不能移除首页
      if (tabName === 'dashboard')
        return

      this.$store.commit('removeTab',tabName)

      //删除后跳转到上一个页面
      let nextName = this.$store.getters.getEditableTabs.slice(-1)[0].name
      this.$router.push(nextName)
      //设置选中的tab
      this.$store.commit('setEditSelected',nextName)
    },
    clickTab(tab){//点击跳转路由
      if (this.$route.path !== tab.name){//如果重复点击 不重复执行跳转
        this.$router.push(tab.name)
        this.$store.commit('setEditSelected',tab.name)//修改选中的menu
      }
    },
  },
}
</script>

<style scoped>

</style>